import React, { Component } from 'react';
import { Card } from 'antd';
import { connect } from 'dva';

import { generateTreeChartOption, generateSunburstChartOption } from '@/utils/echarts-figures.js';
import SunburstChart from './components/SunburstChart/SunburstChart';
import Similar from './components/Similar/Similar';
import './SimilarCompany.less';

class SimilarCompany extends Component {
  static displayName = 'SimilarCompany';

  refreshData() {
    const { dispatch } = this.props;
    dispatch({
      type: 'similarCompany/getSimilar',
    });
  }

  componentDidMount() {
    this.refreshData();
  }

  render() {
    const { isLoading, staticChart, staticDesc, dynamicChart, dynamicDesc } = this.props;
    return (
      <div className="home-page" style={{ paddingTop: '0', borderTop: '1px solid #f1f1f1' }}>
        <Card style={{ borderRadius: '0' }}>
          <SunburstChart staticChart={staticChart} desc={staticDesc} isLoading={isLoading} />
        </Card>
        <Card style={{ borderRadius: '0' }}>
          <Similar dynamicChart={dynamicChart} desc={dynamicDesc} isLoading={isLoading} />
        </Card>
      </div>
    );
  }
}

export default connect(({ loading, similarCompany }) => {
  const { staticDesc, staticChart, dynamicDesc, dynamicChart } = similarCompany;
  return {
    isLoading: loading.effects['similarCompany/getSimilar'],
    staticDesc,
    staticChart,
    dynamicDesc,
    dynamicChart,
  };
})(SimilarCompany);
